<!--
 * @Author: swc shanwenchao12138@163.com
 * @Date: 2024-04-16 14:49:47
 * @LastEditors: swc
 * @LastEditTime: 2024-12-10 11:08:22
 * @FilePath: \vuexf\src\components\base\input\c-barcode-scan\index.vue
 * @Description: 
 * @Version: 2.0
 * @Autor: swc
-->
<template>
  <div class="barcode-scan mian">
    <div class="barcode">
      <span>{{ $srv.getI18nByValue('条码扫描vcxv') }}</span>
      <!-- @on-change="onChange" -->
      <Input
        v-model="value"
        ref="input"
        placeholder="Enter something..."
        clearable
        :disabled="false"
        @on-keyup="onKeyup"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { Input } from 'view-design';
import { Tsrv, T_srv, ifs, ts, vue, I_cmd, T_cmd } from './config';

@T_srv.comp
export default class cBarcodeScan extends vue {
  /* 父组件compBoxInfo */
  @T_srv.prop({
    required: false,
    type: Object,
    default: null
  })
  compBoxInfo: ifs.I_compBoxInfo;

  @T_srv.prop({
    required: false,
    default: null
  })
  parentCommand: any;

  /* 组件名 */
  private name: string = 'cBarcodeScan';

  private G_compName: string = this.name;

  /* 组件箱信息对象 */
  private GT_compBoxInfo: ifs.I_compBoxInfo;

  /* 组件箱对象 */
  private GT_compBox: ifs.I_compBox;

  /* 组件箱识别ID */
  private G_compID: string;

  /* 指挥部 */
  private GT_command: I_cmd = new T_cmd();

  private value: string = '';

  // 结束符标志（键盘--回车、、、，）

  private config: any = null;

  private terminator: string = null;

  private scancodeValue: string = '';

  // private parentInstance: any = null;

  created() {
    // 如果父组件没有传参，那就产生一个
    this.GT_compBoxInfo = Tsrv.getCompInfo(this.compBoxInfo);
    this.G_compID = this.GT_compBoxInfo.compID;
    this.GT_compBox = this.GT_compBoxInfo.TcompBox;
    this.GT_command.init(this, this.GT_compBoxInfo);
    this.init();
  }

  mounted() {
    /* 向父组件发送实例 */
    this.GT_compBox.addCompMergeName(this.G_compID, this.G_compName, this);
    this.$emit('compBoxInfo', this.GT_compBoxInfo);
    this.focus();
  }

  private init() {
    /* 初始化 */
    this.getConfigInfo();
    this.terminator = this.config?.terminator || 'Enter';
  }

  public focus() {
    (this.$refs.input as Input).focus();
    ((this.$refs.input as Input).$el as HTMLInputElement).click();
  }

  // private onKeyup(e: any) {
  //   if (this.terminator !== 'Enter' || Tsrv.utils.noValue(e.code)) {
  //     return;
  //   }
  //   if (this.terminator === 'Enter' && e.code === 'Enter') {
  //     // 回车键
  //     this.doAction(this.value);
  //     this.value = '';
  //   }
  // }
  private onKeyup(e: any) {
    if (
      !Tsrv.utils.noValue(e.code) &&
      !e.ctrlKey &&
      !e.altKey &&
      !e.metaKey &&
      !e.shiftKey
    ) {
      if (e.key !== 'Process') {
        this.scancodeValue += e.key;
      }
      if (this.scancodeValue.lastIndexOf(this.terminator) > -1) {
        this.doAction(this.value.split(this.terminator)[0]);
        this.scancodeValue = '';
      }
    } else if (e.key === 'Enter') {
      if (this.terminator === 'Enter') {
        this.doAction(this.value);
        this.scancodeValue = '';
      }
    }
  }

  // 暂时废弃
  public onChange(e: string) {
    if (this.terminator === 'Enter' && Tsrv.utils.noValue(e)) {
      return;
    }
    if (this.value.lastIndexOf(this.terminator) > -1) {
      this.doAction(this.value.split(this.terminator)[0]);
      // this.value = '';
    }
  }

  private doAction(value: string) {
    if (!Tsrv.noValue(this.parentCommand)) {
      const params = this.parentCommand.getSelectedData();
      params.from = 'cBarcodeScan';
      params.title = 'cBarcodeScan';
      params.data.value = value;
      if (
        !Tsrv.utils.noValue(this.config) &&
        !Tsrv.utils.noValue(this.config?.apiName)
      ) {
        this.parentCommand
          .doEvent(this.config.apiName, params)
          .then((res: any) => {
            if (res) {
              this.setValue('');
            }
          })
          .catch((err: any) => {
            console.error(err);
          });
      }
    }
  }

  // 检测扫码完成后-->重置操作
  public isComplete() {
    // 判断扫码是否完成
    this.value = '';
    // 重置操作
  }

  public setValue(value: string) {
    this.value = value;
  }

  public getValue() {
    return this.value;
  }

  private getConfigInfo() {
    if (!Tsrv.noValue(this.parentCommand)) {
      if (typeof this.parentCommand.getCompConfig === 'function') {
        const parentConfig = this.parentCommand.getCompConfig();
        if (parentConfig) {
          this.config = parentConfig.bancodeScan; // bancodeScan
        }
      }
    }
  }

  destroyed() {
    /* 注册组件销毁 */
    this.GT_compBox.removeCompMergeName(this.G_compID, this.G_compName);

    /* 最终应用组件销毁 */
    /* this.GT_compBox.removeCompMergeName(this.G_compID, this.G_compName,'funName'); */

    /* 如果父组件传入的compBoxInfo则删除本文件产生的引用,反之是本组件产生的ID统一删除 */
    if (Tsrv.utils.isEmpty(this.compBoxInfo)) {
      this.GT_compBox.removeCompsWithCompID(this.G_compID);
    } else {
      this.GT_compBox.removeCompsMergeName(this.G_compID, [
        `'${this.G_compName}'`
      ]);
    }
    /* 如果是动态组件可能会关闭全局compBox */
    // this.GT_compBox = null
  }
}
</script>
<style lang="scss" scoped>
.barcode-scan {
  padding: 0 10px;
}
.barcode {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
  // padding: 0 10px;
  margin: 10px 0;
  border: 1px solid transparent;
  border-radius: 5px;
  background-color: #fff;
  // box-shadow: inset 0 0 10px 5px #aaaaaa17;
  &:hover {
    box-shadow: inset 0 0 10px 5px #aaaaaa1a; // 1a
  }

  span {
    white-space: nowrap;
    margin-left: 5px;
    &::after {
      content: ':';
      margin: 0 5px;
    }
  }
  input {
    width: 100%;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 0 10px;
  }
}
</style>
